Description

As part of the role at The RealBirth Company, contributions were made to the development of an innovative e-learning platform for NHS midwifery staff, surpassing the functionality and user experience of previous versions. The platform is designed to enhance healthcare education by improving accessibility and usability, while increasing awareness of important topics such as pregnancy, women’s health, and midwifery practices. The primary goal is to provide a user-centred, engaging learning experience for healthcare professionals, which would lead to better educational outcomes and improved patient care.

In this project, the focus was on frontend development with contributions to the backend, while conducting extensive UX/UI research to ensure the platform met the needs of NHS midwives and healthcare staff. The platform also addresses key challenges in healthcare training by providing a responsive and intuitive interface for accessing critical resources and training modules.

The UX/UI Design Process

The UX/UI design phase was crucial in ensuring the e-learning platform catered to the diverse needs of NHS midwifery staff. The approach focused on building an accessible, inclusive, and user-friendly platform that enhanced learning for all users. Extensive research was conducted to understand the specific challenges healthcare professionals face, including those related to accessibility, language diversity, and disabilities.

Accessibility Features

To ensure the platform is accessible to all users, regardless of their physical abilities or linguistic background, features aligned with Web Content Accessibility Guidelines (WCAG) were implemented. Key accessibility measures included:

• Visual Accessibility: Offering adjustable text sizes, high-contrast themes, and screen reader compatibility for users with visual impairments.
• British Sign Language (BSL) Support: Recognising the needs of users who are hard of hearing, the platform integrated British Sign Language (BSL) videos and subtitles, allowing all multimedia learning resources to be accessible to BSL users.
• Customisable Learning Tools: Providing flexible settings, such as adjustable screen brightness and colour contrast options, to accommodate users with sensory needs or cognitive impairments.
• Alt-Text and Descriptive Content: All visual elements, such as images, infographics, and video content, were equipped with descriptive alt-text and captions, ensuring full accessibility for users relying on screen readers.

Multilingual Support

In line with the NHS's commitment to inclusivity, the e-learning platform is made available in multiple languages to support healthcare staff from diverse linguistic backgrounds. This included full language support for Tamil and Sorani-Kurdish, ensuring that midwifery staff whose first language is not English could engage with the material effectively. By offering learning modules in multiple languages, the platform enhanced accessibility for international NHS staff, making crucial educational content available in their native languages.

UX/UI Research for Inclusivity

During the research phase, extensive user research was conducted, including interviews, surveys, and usability testing, to gather insights on how NHS midwives and healthcare staff interact with digital platforms, particularly those with disabilities or diverse language needs. Key findings informed the platform’s inclusive design:

• Identifying User Pain Points: Conversations with healthcare professionals highlighted common frustrations, including limited language options and inadequate accessibility in existing platforms. This informed our decision to prioritise language diversity and accessibility.
• Incorporating Diverse Feedback: User testing groups included individuals with a range of disabilities, as well as non-native English speakers, ensuring that the platform was responsive to a wide array of user needs.
• Language and Accessibility Integration: Extensive research into language inclusion was conducted to ensure that learning materials were seamlessly translated into languages such as Urdu, Tamil and Sorani-Kurdish. Additionally, testing was performed to guarantee that non-English speakers could access and navigate the platform with ease, alongside providing British Sign Language (BSL) integration.
• Cognitive Load Reduction: To address the cognitive demands placed on healthcare professionals, a clean, intuitive interface was designed that featured simplified navigation, clear instructions, and visual aids such as icons and progress bars. This ensured that users, regardless of language or ability, could efficiently navigate the platform without unnecessary mental strain.

By focusing on accessibility, language support, and user experience, the e-learning platform ensured that all NHS staff - whether they have disabilities, rely on BSL, or speak languages such as Tamil or Sorani-Kurdish - could access and benefit from the educational resources. This inclusive design approach not only improved training efficiency but also empowered healthcare professionals with vital knowledge on pregnancy, women’s health, and midwifery practices.

Personalised Content for Women's Health and Pregnancy Conditions

As part of the UX/UI research, a key focus was placed on developing personalised content addressing women's sexual and pregnancy health, including conditions such as Hyperemesis Gravidarum, preeclampsia, and gestational diabetes. To ensure the content was relevant and effective, testing was conducted with a group of pregnant women experiencing these conditions. Their feedback provided valuable insights into what they were looking for in e-learning resources, such as clear guidance, up-to-date information, and accessible support tools. This tailored approach not only provided healthcare professionals with condition-specific educational materials but also increased awareness among NHS midwives and staff.

Frontend Development

As part of the role in developing the e-learning platform for NHS midwifery staff, the focus was on building a responsive, user-friendly frontend that offered a seamless learning experience across devices. The frontend was developed using a combination of HTML, CSS, and JavaScript, with particular emphasis on frameworks such as Bootstrap and Laravel to ensure efficient and scalable development.

Responsive Design with Bootstrap

To create a consistent and visually appealing interface, the Bootstrap framework was used, which allowed for the development of responsive layouts that adjusted seamlessly across different devices, including desktops, tablets, and smartphones. Key benefits of using Bootstrap included:

• Grid System: The flexible grid system enabled the creation of dynamic, multi-column layouts that adapted to various screen sizes, ensuring optimal user experience regardless of the device used.
• Pre-Built Components: Using Bootstrap’s rich library of pre-built UI components - such as navigation bars, modals, and forms - enabled rapid development of consistent and visually appealing elements across the platform.
• Customisation: While Bootstrap provided a solid foundation, its components were customised to align with the platform’s unique branding and the specific needs of NHS staff. This included tailoring colours, typography, and interactive elements to enhance usability and accessibility.

Frontend-Backend Integration with Laravel

To ensure the smooth functioning of the platform, the frontend is closely integrated with the Laravel framework on the backend. Although primarily a backend PHP framework, Laravel's integration with the frontend allowed for the following:

• Blade Templating Engine: Laravel’s Blade templating engine facilitated the dynamic rendering of frontend content, enabling efficient and reusable code while maintaining separation of concerns between logic and presentation layers.
• AJAX Integration: Leveraging Laravel’s built-in support for AJAX, asynchronous page loading was implemented, allowing for real-time data updates without requiring full-page refreshes. This significantly enhanced the user experience, particularly for interactive features such as progress tracking.
• Form Handling and Validation: Laravel’s powerful form-handling capabilities streamlined the development of interactive elements, such as registration forms. By incorporating Laravel's validation tools, user data were ensured to be securely processed and accurately displayed on the frontend.

Frontend Optimisation for User Experience

To further enhance the platform’s usability, the focus was on optimising various frontend features to create an engaging and efficient learning environment:

• Intuitive Navigation: Implemented clear, user-friendly navigation menus and buttons that made it easy for NHS staff to locate learning modules and resources. The structure reduced cognitive load and improved overall user satisfaction.
• Interactive Elements: Developed interactive elements, such as progress bars and tooltips, which improved user engagement and retention of educational content. These components were implemented using JavaScript and further styled using Bootstrap to ensure a cohesive look and feel.
• Cross-Browser Compatibility: Ensured that the frontend was tested and optimised for all major browsers, including Chrome, Firefox, Safari, and Edge, providing a consistent experience for all users.

By leveraging Bootstrap for responsive design and integrating the frontend with Laravel, a highly interactive, visually appealing, and user-centred e-learning platform was created. These technologies contributed to an engaging learning environment that supported NHS midwifery staff, offering a seamless and intuitive interface across devices and browsers.

Backend Development

Although primarily focused on frontend tasks, contributions were made to backend development, ensuring the platform’s overall functionality and security. Collaboration with the team occurred to integrate the backend with the frontend, enabling seamless access to user data, course materials, and training progress.

• Technologies Used: PHP, MySQL.
• Key Functions: Secure login, data retrieval for personalised learning experiences, management of user data.

The backend integration also ensured that sensitive healthcare data was handled securely, adhering to NHS data protection standards.

Impact and Results

The development of this e-learning platform resulted in a highly engaging and user-friendly tool that significantly improved NHS staff training. Midwives and healthcare professionals benefited from:

• Enhanced Learning Experience: The platform provided a more interactive and accessible way to engage with educational content, making learning more effective.
• Increased Awareness: The focus on women’s health, pregnancy, and midwifery practices helped raise critical awareness among NHS staff, ultimately leading to better patient care.
• Improved Efficiency: With an intuitive interface and responsive design, NHS staff could access training modules more efficiently, reducing the time spent navigating the platform and increasing focus on learning.

To view The RealBirth Workshop (version 4.0.0)*, click here.

* NB: The new version of the e-learning will be launched in January 2025